<template>
    <div class="jiamengzhan web-inner">
        <div class="top web-inner fangda" v-if="banner[0]">
            <a :href="banner[0].link">
                <img :src="imgUrl+banner[0].image" alt="">
            </a>
        </div>
        <div class=imgs>
            <div class="top">
                <div class="inner web-inner">
                    <a v-if="banner[1]" :href="banner[1].link">
                        <img :src="imgUrl+banner[1].image" alt="">
                    </a>
                    <a v-if="banner[2]" :href="banner[2].link">
                        <img :src="imgUrl+banner[2].image" alt="">
                    </a>
                    <a v-if="banner[3]" :href="banner[3].link">
                        <img :src="imgUrl+banner[3].image" alt="">
                    </a>
                </div>
                <div v-if="banner[4]" class="bottom web-inner fangda">
                    <a :href="banner[4].link">
                        <img :src="imgUrl+banner[4].image" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="banner">
            <a :href="'#'+item.path" v-for="item in menu" class="item">
                {{item.title}}
            </a>
        </div>
        <div class="list">
            <div v-if="drink.length>0" class="list1">
                <div class="inner">
                    <div class="left">
                        <img src="../../static/img/01_b.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="item"  v-for="(item,index) in drink" v-if="index<12">
                            <div class="fangda">
                                <a :href="'#/detail/' + item.brand_id">
                                <img :src="brandImg+item.brand_logo" alt="">
                                </a>
                            </div>
                            <div class="tips">
                                {{item.brand_name}}
                            </div>
                            <div class="red-font">
                                留言咨詢
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="food.length>0" class="list2">
                <div class="inner">
                    <div class="left">
                        <img src="../../static/img/02_b.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="item" v-for="(item,index) in food" v-if="index<12">
                            <div class="fangda">
                                <a :href="'#/detail/' + item.brand_id">
                                <img :src="brandImg+item.brand_logo" alt="">
                                </a>
                            </div>
                            <div class="tips">
                                {{item.brand_name}}
                            </div>
                            <div class="red-font">
                                留言咨询
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="ice.length>0" class="list3">
                <div class="inner">
                    <div class="left">
                        <img src="../../static/img/03_b.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="item" v-for="(item,index) in ice" v-if="index<12">
                            <div class="fangda">
                                <a :href="'#/detail/' + item.brand_id">
                                <img :src="brandImg+item.brand_logo" alt="">
                                </a>
                            </div>
                            <div class="tips">
                                {{item.brand_name}}
                            </div>
                            <div class="red-font">
                                留言咨询
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="hotpot.length>0" class="list4">
                <div class="inner">
                    <div class="left">
                        <img src="../../static/img/04_b.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="item" v-for="(item,index) in hotpot" v-if="index<12">
                            <div class="fangda">
                                <a :href="'#/detail/' + item.brand_id">
                                <img :src="brandImg+item.brand_logo" alt="">
                                </a>
                            </div>
                            <div class="tips">
                                {{item.brand_name}}
                            </div>
                            <div class="red-font">
                                留言咨询
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="oversea.length>0" class="list5">
                <div class="inner">
                    <div class="left">
                        <img src="../../static/img/05_b.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="item" v-for="(item,index) in oversea" v-if="index<12">
                            <div class="fangda">
                                <a :href="'#/detail/' + item.brand_id">
                                <img :src="brandImg+item.brand_logo" alt="">
                                </a>
                            </div>
                            <div class="tips">
                                {{item.brand_name}}
                            </div>
                            <div class="red-font">
                                留言咨询
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="skill.length>0" class="list6">
                <div class="inner">
                    <div class="left">
                        <img src="../../static/img/07_b.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="item" v-for="(item,index) in skill" v-if="index<12">
                            <div class="fangda">
                                <a :href="'#/detail/' + item.brand_id">
                                    <img :src="brandImg+item.brand_logo" alt="">
                                </a>
                            </div>
                            <div class="tips">
                                {{item.brand_name}}
                            </div>
                            <div class="red-font">
                                留言咨询
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="common-bottom fangda">
                <a :href="bottomImg.link">
                    <img :src="imgUrl+bottomImg.image" alt="">
                </a>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "jiamengzhan",
        data() {
            return {
                menu:[],
                bottomImg:"",
                drink:[],
                food:[],
                hotpot:[],
                ice:[],
                oversea:[],
                skill:[],
                banner:[]
            }
        },
        mounted() {
            this.getBrandCategory();
            this.getOnlineExpo();
            this.getImg();
        },
        methods:{
            getBrandCategory() {
                this.$http.post(this.API.get_brand_category).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    res.data.forEach((item) => {
                        item.path = "/pinpai/" + item.order
                    this.menu.push(item)
                })
                    console.log(this.menu)
                }
            })
            },
            getOnlineExpo() {
                this.$http.post(this.API.get_online_expo).then((res) => {
                if(res.status ===200 && res.data){
                    this.drink=res.data.drink;
                    this.food=res.data.food;
                    this.hotpot=res.data.hotpot;
                    this.ice=res.data.ice;
                    this.oversea=res.data.oversea;
                    this.skill=res.data.skill;
                    this.banner=res.data.banner;
                }
            })
            },
            getImg() {
                this.$http.post(this.API.get_banner_home).then((res) => {
                    let $this = this;
                console.log(res);
                if(res.status ===200 && res.data.length>0){
                    res.data.forEach((item) => {
                    if(item.location==="h4"){
                        this.bottomImg=item;
                    }
                })
                }
            })
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    .jiamengzhan{
        margin: 0 auto;
        .top{
            margin: 20px auto;
            img{
                width: 100%;
            }
        }
        .imgs{
            width:100%;
            .top{
                width: 100%;
                background-color: #e9efeb;
                .inner{
                    box-sizing: border-box;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 10px 0;
                    a{
                        width: 100%;
                        overflow: hidden;
                    }
                    img{
                        transition: all 0.5s;
                        &:hover{
                            transform: scale(1.2);
                        }
                        width: 100%;
                    }

                }
                .bottom{
                    margin: 0 auto;
                    display: flex;
                    flex-direction: row;
                    a{
                        width: 100%;
                    }
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .banner{
            width: 100%;
            height: 82px;
            line-height: 82px;
            font-size: 24px;
            color: #ffffff;
            background-color: #285b9a;
            text-align: center;
            a{
                padding: 0 10px 0 18px;
                border-left: 2px solid #ffffff;
                cursor: pointer;
                color: #ffffff;
                &:hover{
                    color: #ffdc2a;
                }
                &:last-child{
                    border-right: 2px solid #ffffff;
                }
            }

        }
        .list{
            width: 100%;
        }
        .bottom{
            margin: 20px auto;
        }
        .list1{
            background-color: #fff8db;
        }
        .list2{
            background-color: #edf3cf;
        }
        .list3{
            background-color: #e6f2f0;
        }
        .list4{
            background-color: #ffedc7;
        }
        .list5{
            background-color: #eceaff;
        }
        .list6{
            background-color: #ffffe7;
        }
        .inner{
            margin: 0 auto;
            padding: 20px 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left{
                width: 225px;
                margin-right: 10px;
                img{
                    cursor: pointer;
                    width:100%;
                }
            }
            .right{
                flex: 1;
                /*display: flex;*/
                /*flex-direction: row;*/
                /*flex-wrap: wrap;*/
                /*background-color: #ffffff;*/
                .item{
                    width:24%;
                    display: inline-block;
                    box-sizing: border-box;
                    margin:0.5%;
                    border: 1px solid #e6e6e6;
                    background-color: #ffffff;
                    margin-bottom: 5px;
                    .fangda{
                        width: 100%;
                        height: 128px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        box-shadow:0px 1px 3px 0px #ccc;
                        cursor: pointer;
                        border-bottom: 1px solid #e6e6e6;
                    }
                    img{
                       width: 100%;
                    }
                    &:nth-child(4n){
                        margin-right: 0;
                    }
                    .tips{
                        box-sizing: border-box;
                        padding: 0 5px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 12px;
                        text-align: center;
                        vertical-align: middle;
                        font-size: 12px;
                        margin: 10px 0 5px 0
                    }
                    .red-font{
                        line-height: 12px;
                        font-size: 12px;
                        color: @fontColor;
                        text-align: center;
                        margin-bottom: 10px;
                    }
                }

            }
        }
    }

</style>